<template>
    <div class="handle-tree" @contextmenu.prevent="rightClick" @click="handleRightClose">
        <el-input placeholder="输入关键字进行过滤" v-model="filterText" class="search-tree">
        </el-input>
        <el-tree class="tree" draggable ref="tree" @node-drop="handleDrop" @node-click="handleNodeClick" :filter-node-method="filterNode" @node-contextmenu="rightClick" :data="tree" :props="props"></el-tree>
        <ul class="handle-tree-ul handle-department-top" v-show="handle_department_top_show">
            <li @click="handleForm(0)">创建顶级</li>
        </ul>
        <ul class="handle-tree-ul handle-department" v-show="handle_department_show">
            <li @click="handleForm(1)">添加下级</li>
            <li @click="handleForm(2)">修改</li>
            <li @click="handleForm(3)">删除</li>
        </ul>
        <department-form :form_title="form_title" :id="pid"></department-form>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
import department from "@/api/department.js";

import DepartmentForm from "./create.vue";

export default {
    name: "department-tree",
    computed: {
        ...mapGetters({
            department_tree: "department1/department_tree"
        })
    },
    components: {
        DepartmentForm
    },
    data() {
        return {
            tree: undefined,
            props: {
                label: "text",
                children: "children",
                value: "id"
            },
            handle_department_top_show: false,
            handle_department_show: false,
            form_title: undefined,
            pid: undefined,
            department_form: undefined,
            filterText: undefined
        };
    },
    mounted() {
        department.getDepartmentTree().then(res => {
            this.tree = res;
        });
    },
    methods: {
        filterNode(value, data) {
            if (!value) return true;
            return data.text.indexOf(value) !== -1;
        },
        rightClick(event, data, node, array) {
            let dom;
            if (data === undefined) {
                dom = document.getElementsByClassName(
                    "handle-department-top"
                )[0];
                this.handle_department_top_show = true;
                this.handle_department_show = false;
            } else {
                dom = document.getElementsByClassName("handle-department")[0];
                this.handle_department_show = true;
                this.handle_department_top_show = false;
                this.pid = data.id;
            }
            dom.style.left = event.pageX + "px";
            dom.style.top = event.pageY + "px";
            // dom.style.left = (event.pageX - 208) + "px";
            // dom.style.top = (event.pageY - 120) + "px";
            dom = null;
        },
        handleNodeClick(data, node) {
            this.handleRightClose();
            if (data.children) {
                this.$store.dispatch(
                    "department1/getDepartmentDetails",
                    data.id
                );
                this.$store.commit(
                    "department1/CHANGE_IS_DEPARTMENT_DETAILS_SHOW",
                    true
                );
            } else {
                this.$store.dispatch("department1/getDepartmentUserList", {
                    id: data.id
                });
                this.$store.dispatch(
                    "department1/getDepartmentRightDetails",
                    data.id
                );
                this.$store.commit(
                    "department1/CHANGE_IS_DEPARTMENT_RIGHT_DETAILS_SHOW",
                    true
                );
            }
        },
        handleRightClose() {
            this.handle_department_show = false;
            this.handle_department_top_show = false;
        },
        async handleForm(val) {
            switch (val) {
                case 0:
                    this.pid = 0;
                    this.$store.commit(
                        "department1/CHANGE_IS_DEPARTMENT_FORM_DIALOG_SHOW",
                        true
                    );
                    this.$store.commit(
                        "department1/CHANGE_IS_CREATE_DEPARTMENT",
                        true
                    );
                    this.form_title = "创建部门";
                    break;
                case 1:
                    this.$store.commit(
                        "department1/CHANGE_IS_DEPARTMENT_FORM_DIALOG_SHOW",
                        true
                    );
                    this.$store.commit(
                        "department1/CHANGE_IS_CREATE_DEPARTMENT",
                        true
                    );
                    this.form_title = "创建部门";
                    break;
                case 2:
                    this.$store.commit(
                        "department1/CHANGE_IS_DEPARTMENT_FORM_DIALOG_SHOW",
                        true
                    );
                    this.$store.commit(
                        "department1/CHANGE_IS_CREATE_DEPARTMENT",
                        false
                    );
                    this.form_title = "修改部门";
                    break;
                case 3:
                    this.$confirm("确认删除?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    })
                        .then(() => {
                            department
                                .delDepartmentData({ id: this.pid })
                                .then(res => {
                                    this.$store.dispatch(
                                        "department1/getDepartmentTree"
                                    );
                                    this.$store.dispatch(
                                        "department1/getSysDepartmentTree"
                                    );
                                    this.$message({
                                        type: "success",
                                        message: "删除成功!"
                                    });
                                })
                                .catch(err => {
                                    this.$message.error(err);
                                });
                        })
                        .catch(() => {
                            this.$message({
                                type: "info",
                                message: "已取消删除"
                            });
                        });
                    break;
            }
        },
        handleDrop(draggingNode, dropNode, dropType, ev) {
            if (dropType === "inner") {
                department
                    .moveSite({
                        id: draggingNode.data.id,
                        parentId: dropNode.data.id
                    })
                    .then(() => {
                        this.$store.dispatch("department1/getDepartmentTree");
                        this.$store.dispatch(
                            "department1/getSysDepartmentTree"
                        );
                        this.$message({
                            message: "移动成功!",
                            type: "success"
                        });
                    })
                    .catch(() => {
                        this.$message.error("移动不成功!");
                    });
            } else {
                if (dropNode.level === 1) {
                    department
                        .moveSite({
                            id: draggingNode.data.id
                        })
                        .then(() => {
                            this.$store.dispatch(
                                "department1/getDepartmentTree"
                            );
                            this.$store.dispatch(
                                "department1/getSysDepartmentTree"
                            );
                            this.$message({
                                message: "移动成功!",
                                type: "success"
                            });
                        })
                        .catch(() => {
                            this.$message.error("移动不成功!");
                        });
                } else {
                    department
                        .moveSite({
                            id: draggingNode.data.id,
                            parentId: dropNode.data.id
                        })
                        .then(() => {
                            this.$store.dispatch(
                                "department1/getDepartmentTree"
                            );
                            this.$store.dispatch(
                                "department1/getSysDepartmentTree"
                            );
                            this.$message({
                                message: "移动成功!",
                                type: "success"
                            });
                        })
                        .catch(() => {
                            this.$message.error("移动不成功!");
                        });
                }
            }
        }
    },
    watch: {
        department_tree(newVal) {
            if (newVal) {
                department.getDepartmentTree().then(res => {
                    this.tree = res;
                });
            }
        },
        filterText(val) {
            this.$refs["tree"].filter(val);
        }
    }
};
</script>

<style>
</style>
